import React, { Component } from "react";
import './TodoList.css';
import TodoHeader from "../TodoHeader/TodoHeader";
import TodoMain from "../TodoMain/TodoMain";
import TodoFooter from "../TodoFooter/TodoFooter";
import { nanoid } from "nanoid";

export default class TodoList extends Component {

    state = {
        todos: [
            {id: 1, title: '中午买菜', done: false},
            {id: 2, title: '复习JS函数', done: true},
            {id: 3, title: '中午联系班主任 - 准备舞蹈', done: false},
        ]
    }

    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <TodoHeader addTodo={this.add}/>
                    <TodoMain todos={this.state.todos} checkTodo={this.checkTodo} remove={this.remove}  />
                    <TodoFooter removeComTodos={this.removeComTodos} checkAllTodo={this.checkAllTodo} todos={this.state.todos} />
                </div>
            </div>
        );
    }

    //声明一个方法  独立方法
    add = (title) => {
        this.setState({
            todos: [
                ...this.state.todos, 
                {
                    id: nanoid(),
                    title: title,
                    done: false
                }
            ]
        })
    }

    //声明一个方法 修改某个任务的完成状态
    checkTodo = (id, done) => {
        //获取所有的任务
        let {todos} = this.state;
        //操作 修改指定 id 的状态
        let newTodos = todos.map(item => {
            //判断
            if(item.id === id){
                item.done = done;
            }
            return item;
        });
        //修改状态
        this.setState({
            todos: newTodos
        })
    }

    //声明方法 删除某个任务
    remove = (id) => {
        //获取所有的任务
        let {todos} = this.state;
        //过滤
        let newTodos = todos.filter(item => item.id !== id);
        //设置修改状态
        this.setState({
            todos: newTodos
        })
    }

    //声明方法 批量修改任务的完成状态
    checkAllTodo = (done) => {
        //批量的修改状态
        let {todos} = this.state;
        let newTodos = todos.map(item => {
            //修改任务的状态
            item.done = done;
            return item;
        });
        //设置
        this.setState({
            todos: newTodos
        })
    }

    //声明方法 删除所有已经完成的任务
    removeComTodos = () => {
        this.setState({
            todos: this.state.todos.filter(item => item.done === false)
        })
    }

    //不能使用类内部添加方法的形式
    // checkTodo(){

    // }

    //测试
    componentDidMount(){
        // this.add('中午要买菜...');
        //测试改变某个任务的状态
        // this.checkTodo(3, true);
        //测试删除某个任务
        // this.remove(1);
        //测试批量任务处理
        // this.checkAllTodo(false);
        //测试删除完成任务
        // this.removeComTodos();
    }

}
